<template>
  <div class="product-list-wrapper">
    <div class="nav-bar">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-container>
      <div class="aside" width="200px">
        <el-affix @change="handleChange" :offset="10">
          <ul class="text-[14px]">
            <li>全部</li>
            <li class="active">亚克力</li>
          </ul>
        </el-affix>
      </div>
      <div class="aside" v-show="asideFlag"></div>
      <el-main>
        <header>
          <div>全部</div>
          <div>钥匙扣/挂件</div>
          <div>立牌</div>
        </header>
        <main>
          <template :key="item" v-for="item in 15">
            <div @click="toPath('detail')" class="item">
              <div class="product-img">
                <img
                  src="https://q01.yinge.cc/resource/2024/03/22/6e771757-1227-4ea7-b970-57c16639ea26.jpeg?imageMogr2/auto-orient/format/webp/thumbnail/!750x750r/interlace/1/ignore-error/1"
                  alt=""
                />
              </div>
              <div class="product-text">
                <div class="top">
                  <span class="new">新品</span>
                  <span class="title-text"
                    >仿柯印透明无底座立牌（支持彩窗）</span
                  >
                </div>
                <div class="desc">10mm厚度亚克力立牌</div>
                <div class="foot">
                  <div class="price">
                    <span>2.90</span>
                    <i>起</i>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </main>
        <footer>
          <el-pagination small layout="prev, pager, next" :total="50" />
        </footer>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const asideFlag = ref(false)
const handleChange = (flag) => {
  asideFlag.value = flag
}

const router =useRouter()
const toPath = ()=>{
  router.push({name:'detail'})
}
</script>

<style lang="scss" scoped>
.product-list-wrapper {
  width: 1180px;
  margin: 0 auto;
  .nav-bar {
    padding-top: 14px;
    padding-bottom: 48px;
  }
  .el-container {
    .aside {
      ul {
        margin-right: 10px;
        width: 200px;
        height: 452px;
        background-color: #fff;
        padding: 12px 10px;
        li {
          display: flex;
          justify-content: center;
          align-items: center;
          list-style: none;
          height: 44px;
          border-radius: 4px;
          cursor: pointer;
          margin: 4px 0;
          &.active {
            background: linear-gradient(270deg, #e5ffef 0%, #fff6c9 100%);
          }
        }
      }
    }
    .el-main {
      padding: 0;
      min-height: 500px;
      header {
        height: 58px;
        display: flex;
        flex-flow: row wrap;
        padding: 14px 10px;
        background-color: #fff;
        border-radius: 6px;
        margin-bottom: 10px;
        row-gap: 12px;
        > div {
          padding: 8px 12px;
          border-radius: 19px;
          background-color: #edeff4;
          margin-right: 10px;
          font-weight: 400;
          font-size: 14px;
          color: #777e90;
          line-height: 14px;
          text-align: left;
          font-style: normal;
          cursor: pointer;
        }
      }
      main {
        display: flex;
        flex-flow: row wrap;
        row-gap: 10px;
        margin-bottom: 30px;
        .item {
          border-radius: 6px;
          width: 235px;
          margin-right: 10px;
          overflow: hidden;
          cursor: pointer;
          &:nth-of-type(4n) {
            margin-right: 0;
          }
          .product-img {
            img {
              height: 100%;
              width: 100%;
            }
          }
          .product-text {
            background: #ffffff;
            padding: 12px 10px 14px;
            .top {
              display: flex;
              align-items: center;
              .new {
                white-space: nowrap;
                padding: 0 3px;
                height: 22px;
                line-height: 22px;
                background: #07c160;
                border-radius: 2px;
                color: #fff;
                font-size: 12px;
                display: flex;
                text-align: center;
                justify-content: center;
                align-items: center;
                z-index: 1;
                margin-left: -4px;
                transform: scale(0.8);
              }
              .title-text {
                font-weight: 400;
                font-size: 14px;
                color: #121212;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .desc {
              padding: 10px 0;
              font-size: 12px;
              line-height: 14px;
              color: #777e90;
            }
            .foot {
              .price {
                font-size: 16px;
                font-family: MiSans, MiSans;
                font-weight: 600;
                color: red;
                i {
                  font-size: 12px;
                  font-weight: 400;
                  color: #777e90;
                  line-height: 12px;
                  margin-left: 4px;
                  font-style: normal;
                }
              }
            }
          }
        }
      }
      footer {
        display: flex;
        justify-content: center;
        margin-bottom: 60px;
        ::v-deep .el-pagination {
          --el-pagination-bg-color: transparent;
          --el-pagination-button-disabled-bg-color: transparent;
          .btn-next,
          .btn-prev {
            background-color: transparent;
          }
        }
      }
    }
  }
}
</style>
